<mat-list-item class="container"
              [ngClass]="{
                         'priority-normal': item.priority ===3,
                         'priority-important': item.priority ===2,
                         'priority-emergency': item.priority ===1
                         }"
              (click)="onItemClick()"

>
  <mat-checkbox [checked]="item.completed" class="completion-status" (click)="onClickCheckbox($event)"></mat-checkbox>

  <div  mat-line class="content" [ngClass]="{'completed':item.completed}">
    <span   matTooltip='{{item.desc}}' [matTooltipPosition]="">{{item.desc}}</span>
    <!--<mat-tooltip-component>{{item.desc}}</mat-tooltip-component>-->
  </div>
  <div mat-line class="bottom-bar">
        <span class="due-date" *ngIf="item.dueDate">
        	{{item.dueDate | date: "yy-MM-dd" }}
        </span>
    <mat-icon *ngIf="item.reminder">alarm</mat-icon>
  </div>
  <mat-icon [svgIcon]="avatar" mat-list-avator  class="avatar"></mat-icon>

</mat-list-item>
